<template>
	<div>        
        <div class="b">
            <div class="wrap3">   
			  <div class="container-water-fall">
				<waterfall :col='col' 
					:gutterWidth="0"
					:data="goodsList"   
					 :isTransition="false"
					 >
					<template>					
					    <div class="box" :data-id="item.comId"
					    	 v-for="item in goodsList">
					    	<div class="imgWrap">
					    	   <img :src="item.goodsImage" alt="" class="comId" :data-id="item.comId"/>
					    	</div>						    							    	
					    	<div class="desc">
					    	   <div class="title comId" :data-id="item.comId">
					    	   	<span>{{item.comName}}</span>
					    	   </div>
					    	   <div class="desc_layout1" style="display: flex;align-items: center;">
					    	   	  
					    	   	   <div class="price1">&yen;<span class="comId" :data-id="item.comId">{{item.comPrice}}</span></div>
						    	   <div >
						    	   	  <span class="tag"></span>
						    	   	  <span>{{item.goodsWants}}人想要</span>
						    	   </div>					    	   	  
					    	   </div>						    	   							       
					    	</div>						    							    	
					    </div>
				    </template>
				</waterfall>				
			  </div>             	
            </div>         	
        </div>
	
	</div>	
</template>

<script>	
export default {	
	data() {
       return {
         col:3,                    // 一行显示2个item	  
       }
	},
	props:['goodsList'],
	methods: {	
        jumpDetail(id){
        	console.log(id)
        },
	},		
	mounted() {

	}
}	
</script>

<style >
.wrap_a{padding: 30px 0 4px;background: #f2f2f2;text-align: center;}
*{box-sizing: border-box;}
.box {margin-top:16px;}
.imgWrap>img{width: 100%;border-radius: 10px 10px 0 0;display: block;}
.desc{background: #fff;border-radius: 0 0 10px 10px;padding: 10px;}
.desc .title{font-weight: bold;font-size: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.desc_layout1{display: flex;justify-content: space-between;margin-top: 10px;color: #bcbcbc;}
.price1{font-weight: bold;color: #FF3B30;font-size: 14px;}
.price2{text-decoration: line-through;}
.tag>img{width: 32px;height: 16px;display: inline-block;vertical-align: -3px;margin-right: 4px;}
.x-red{color: #e86468;font-weight: bold;}
.ft16{font-size: 16px;}
.desc_layout2{display: flex;margin-top: 10px;color: #bcbcbc;align-items: center;}
.desc_layout2>img{width: 20px;height: 20px;border-radius: 50%;margin-right: 5px;} 
</style>